<template>
  <div class="h-full flex flex-col">
    <div class="model-header">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="5" :lg="4" :xl="3" class="mb-[15px]">
          <el-input v-model="queryData.name" placeholder="请输入标签名称" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="5" :lg="4" :xl="3" class="mb-[15px]">
          <el-select
            v-model="queryData.type"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入标注员"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options.type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="18" :md="12" :lg="8" :xl="6" class="mb-[15px]">
          <div class="flex">
            <el-button class="w-[80px]" color="#626aef" type="primary">
              查询
            </el-button>
            <el-button
              class="w-[140px]"
              color="#626aef"
              type="primary"
              disabled
            >
              导入已有标签
            </el-button>
            <el-button
              class="w-[110px]"
              color="#626aef"
              type="primary"
              @click="onOpenDialog('create')"
            >
              新建标签
            </el-button>
            <el-button class="w-[110px]" color="#626aef" type="primary">
              标签导出
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="sheet flex-1 overflow-auto">
      <!-- <div>用户信息: {{ userInfos }}</div> -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'font-weight': 'bold', color: '#333' }"
      >
        <el-table-column prop="type" label="标签类型" align="center" />
        <el-table-column prop="inputType" label="输入类型" align="center">
          <template #default="{ row }">
            <el-tag
              effect="plain"
              :type="
                row.inputType === 3
                  ? 'danger'
                  : row.inputType === 2
                    ? 'warning'
                    : 'primary'
              "
            >
              {{
                row.inputType === 3
                  ? '文本'
                  : row.inputType === 2
                    ? '多选'
                    : '单选'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="标签ID" align="center" />
        <el-table-column prop="options" label="标签选项" align="center" />
        <el-table-column prop="comment" label="标签说明" align="center" />
        <el-table-column prop="count" label="语句数" align="center" />
        <el-table-column prop="ctime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button type="primary" text>
              <Edit class="w-[18px] h-[18px] mr-[2px]" />
              <span>编辑</span>
            </el-button>
            <el-button type="primary" text>
              <Comment class="w-[18px] h-[18px] mr-[2px]" />
              <span>语句管理</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-center py-[15px] border-t">
      <el-pagination
        v-model:current-page="queryData.pageNum"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <LabelDialog ref="labelDialogRef" />
  </div>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent, reactive } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '@/store/user';
  import { useRouter } from 'vue-router';
  import { OptionType } from '@/types/app';

  const LabelDialog = defineAsyncComponent(() => import('./dialog.vue'));

  const router = useRouter();
  const userStores = useUserInfo();
  const { userInfos } = storeToRefs(userStores);

  const loading = ref(false);
  const labelDialogRef = ref();

  const queryData = reactive({
    name: '', //标签名称
    type: '', //标签类型
    startTime: '', //开始时间
    endTime: '', //结束时间
    pageNum: 1, //页码
    pageSize: 10, //页数
  });

  const options = reactive({
    type: [] as OptionType[],
  });

  const tableData = [
    {
      checkType: null,
      comment: '文本标签测试',
      count: 0,
      ctime: '2025-03-13 09:43:58',
      exclusiveRules: null,
      id: 641,
      inputType: 3,
      llmId: 46,
      name: '文本标签测试',
      options: '',
      parentId: null,
      required: 1,
      sort: null,
      type: '文本标签测试',
      typeSort: 1,
      userId: '63',
      utime: '2025-03-13 09:57:49',
      wordLimited: 500,
    },
    {
      checkType: null,
      comment: '选择说明3',
      count: 0,
      ctime: '2025-03-13 08:59:32',
      exclusiveRules: '选择1@',
      id: 639,
      inputType: 2,
      llmId: 46,
      name: '客户端测试2',
      options: '解释3',
      parentId: null,
      required: 0,
      sort: null,
      type: '客户端测试2',
      typeSort: 2,
      userId: '63',
      utime: '2025-03-13 09:57:49',
      wordLimited: -1,
    },
    {
      checkType: null,
      comment: '解释说明2',
      count: 0,
      ctime: '2025-03-13 08:59:32',
      exclusiveRules: '选择1@',
      id: 638,
      inputType: 2,
      llmId: 46,
      name: '客户端测试2',
      options: '选择2',
      parentId: null,
      required: 0,
      sort: null,
      type: '客户端测试2',
      typeSort: 2,
      userId: '63',
      utime: '2025-03-13 09:57:49',
      wordLimited: -1,
    },
    {
      checkType: null,
      comment: '解释说明一',
      count: 0,
      ctime: '2025-03-13 08:59:32',
      exclusiveRules: '选择1@',
      id: 637,
      inputType: 2,
      llmId: 46,
      name: '客户端测试2',
      options: '选择1',
      parentId: null,
      required: 0,
      sort: null,
      type: '客户端测试2',
      typeSort: 2,
      userId: '63',
      utime: '2025-03-13 09:57:49',
      wordLimited: -1,
    },
  ];

  const handleSizeChange = (val: number) => {
    queryData.pageSize = val;
  };

  const handleCurrentChange = (val: number) => {
    queryData.pageNum = val;
  };

  const remoteMethod = (query: string) => {
    const assetsOptions = [
      {
        label: '文本标签测试22	',
        value: '文本标签测试22	',
      },
      {
        label: '客户端测试2	',
        value: '客户端测试2	',
      },
    ];
    if (query) {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
        options.type = assetsOptions.filter((item) => {
          return item.label.toLowerCase().includes(query.toLowerCase());
        });
      }, 200);
    } else {
      options.type = [...assetsOptions];
    }
  };

  // 打开弹窗
  const onOpenDialog = (type: string) => {
    labelDialogRef.value?.openDialog(type);
  };
</script>

<style scoped>
  .el-button {
    padding: 5px !important;
  }
</style>
